<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="../js/d3.v3.js"></script>
</head>
<body>
<script>

	var w = 500;
	var h = 400;

	var svg = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h)

	var dataset = [];
	for (var i = 0; i < 10; i++) {
		var xNumber = Math.random() * 200;
		var yNumber = Math.random() * 300;
		dataset.push({
			x: xNumber,
			y: yNumber
		});
	}

	var xScale = d3.scale.linear()
			.range([0, w])
			.domain([
				d3.min(dataset, function(d){
					return d.x;
				}),
				d3.max(dataset, function(d){
					return d.x;
				})
			]);

	var yScale = d3.scale.linear()
			.range([0, h])
			.domain([
				d3.min(dataset, function(d){
					return d.y;
				}),
				d3.max(dataset, function(d){
					return d.y;
				})
			]);

	var circles = svg.selectAll("circle")
			.data(dataset)
			.enter()
			.append("circle")

	circles
			.attr("cx", function (d, i) {
				return xScale(d.x);
			})
			.attr("cy", function(d, i){
				return yScale(d.y)
			})
			.attr("r", 5)

	svg.selectAll("text")
			.data(dataset)
			.enter()
			.append("text")
			.attr("x", function(d){
				return xScale(d.x)  + 5
			})
			.attr("y", function(d){
				return yScale(d.y)  + 3
			})
			.text( function(d){
				return Math.floor(d.x)  + "," + Math.floor(d.y);
			})




</script>
</body>
</html>